<script lang="ts" setup>
const model = defineModel();

const emit = defineEmits(['change']);

function handleAdd() {
	model.value = (model.value || 0) + 1;
	emit('change');
}

function handleReduce() {
	if (model.value > 1) {
		model.value = (model.value || 0) - 1;
	}
	emit('change');
}
</script>

<template>
	<view class="dlk-quantity">
		<view class="add" @tap="handleReduce">-</view>
		<view class="value">{{ model || 1 }}</view>
		<view class="reduce" @tap="handleAdd">+</view>
	</view>
</template>

<style lang="scss" scoped>
.dlk-quantity {
	display: flex;
	background-color: #f6f6f6;
	border-radius: 10rpx;

	.add,
	.value,
	.reduce {
		font-size: 26rpx;
		line-height: 26rpx;
		padding: 6rpx 24rpx;
		margin: 14rpx 0;
	}

	.value {
		border-left: 1rpx solid #dddddd;
		border-right: 1rpx solid #dddddd;
	}
}
</style>
